<template>
  <div class="page">
    <ListPaper>
      <!-- 顶部搜索区域 -->
      <template #header-search>
        <!-- <SearchBox
          v-model="searchData"
          :fields="searchFields"
          :loading="tableLoading"
          :is-show-reset-btn="true"
          :is-show-all-fields="false"
          size="small"
          @search-change="searchList"
          @reset="handleReset"
        /> -->
        <TableSearch
          :conditionList="searchFields"
          @search="searchList"
          @reset="handleReset"
        />
      </template>

      <!-- 顶部操作按钮 -->
      <template #header-button>
        <!-- <el-button type="primary" @click="handleCreate">新增</el-button> -->
      </template>

      <!-- 列表上方操作按钮 -->
      <template #list-button>
        <el-button @click="handleExport">导出Excel</el-button>
      </template>

      <!-- 列表内容区域 -->
      <template #list>
        <el-table
          :data="totalData"
          v-loading="tableLoading"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="status" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                {{ row.status === 1 ? "启用" : "禁用" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 底部左侧按钮 -->
      <template #footer-buttons>
        <el-button @click="handleRefresh">刷新</el-button>
      </template>

      <!-- 底部右侧分页 -->
      <template #footer>
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :total="pageTotal"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="pageChange"
          @size-change="sizeChange"
        />
      </template>
    </ListPaper>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useTableList } from "@/hooks/useTableList";
import ListPaper from "@/components/ListPaper/index.vue";
import TableSearch from "@/components/TableSearch/TableSearch.vue";
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElTag,
  ElPagination,
} from "element-plus";
// 模拟API请求函数
const fetchApi = (params: any) => {
  // 这里替换为您的实际API调用
  console.log("请求参数:", params);
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = Array.from({ length: 10 }, (_, i) => {
        console.log("i", i);
        return {
          id: i + 1,
          name: `项目${i + 1}`,
          status: Math.random() > 0.5 ? 1 : 0,
        };
      });

      resolve({
        code: 0,
        data: {
          list: data,
          totalCount: 100,
          totalPage: 5,
          pageNo: 1,
          pageSize: 20,
          offset: 5,
        },
      });
    }, 500);
  });
};
const searchData = ref({});
// 使用useTableList hook
const {
  listApi,
  pageNo,
  pageTotal,
  pageSize,
  tableLoading,
  totalData,
  selectedRows,
  searchModel,
  foreignModel,
  pageNoName,
  pageSizeName,
  updateListForeion,
  isCheckedAtLeastOneRow,
  handleSelectedRow,
  sizeChange,
  pageChange,
  searchList,
  lazyGetList,
} = useTableList(fetchApi,{
    beforeGetList: (params) => {
      console.log("请求前params", params);
      return params;
    },
    afterGetList:(res)=>{
      console.log("请求后res", res);
      return res;
    }
  });
const handleReset = () => {
  searchModel.value = {};
  searchList();
};
const handleRefresh = () => {
  searchList();
};

onMounted(() => {
  searchList();
});

const searchFields = [
  {
    type: "input",
    label: "用户名",
    prop: "username",
    isFixed: true,
    span: 6,
  },
  {
    type: "input",
    label: "用户名",
    prop: "username2",
    isFixed: true,
    span: 6,
  },
  {
    type: "input",
    label: "用户名",
    prop: "username3",
    isFixed: true,
    span: 6,
  },
  {
    type: "input",
    label: "用户名",
    prop: "username4",
    isFixed: true,
    span: 6,
  },
  {
    type: "input",
    label: "用户名",
    prop: "username6",
    isFixed: true,
    span: 6,
  },
  {
    type: "select",
    label: "状态",
    prop: "status",
    isFixed: true,
    span: 6,
    options: [
      { label: "全部", value: "" },
      { label: "启用", value: "1" },
      { label: "禁用", value: "0" },
    ],
  },
  // {
  //   type: "date",
  //   label: "创建时间",
  //   prop: "createTime",
  //   dateType: "daterange",
  //   span: 12,
  // },
  {
    type: "input",
    label: "邮箱",
    prop: "email",
    span: 6,
  },
  {
    type: "select",
    label: "角色",
    prop: "role",
    span: 6,
    options: [
      { label: "管理员", value: "admin" },
      { label: "用户", value: "user" },
      { label: "访客", value: "guest" },
    ],
  },
];
</script>
<style lang="less" scoped>
.page{
   width: 100%;
}
</style>
